<template>
  <view>
    <form>

      <view class="cu-form-group">
        <view class="title">姓名</view>
        <input placeholder="姓名" name="input" v-model="form.nickname"/>
      </view>
      <view class="cu-form-group">
        <view class="title">背景图</view>
        <form-image :value.sync="form.bg_img"/>
      </view>
      <view class="cu-form-group">
        <view class="title">描述</view>
        <textarea placeholder="描述" name="input" v-model="form.remark"/>
      </view>
      <view class="cu-form-group">
        <view class="title">微信姓名</view>
        <input placeholder="微信姓名" name="input" v-model="form.wx_name"/>
      </view>
      <view class="cu-form-group">
        <view class="title">微信收款码</view>
        <form-image :value.sync="form.wx_qr"/>
      </view>
      <view class="cu-form-group">
        <view class="title">支付宝账号</view>
        <input placeholder="支付宝账号" name="input" v-model="form.alipay_name"/>
      </view>
      <view class="cu-form-group">
        <view class="title">支付宝收款码</view>
        <form-image :value.sync="form.alipay_qr"/>
      </view>
      <view class="cu-form-group">
        <view class="title">银行卡姓名</view>
        <input placeholder="银行卡姓名" name="input" v-model="form.bank_name"/>
      </view>
      <view class="cu-form-group">
        <view class="title">银行卡开户行</view>
        <input placeholder="银行卡开户行" name="input" v-model="form.bank"/>
      </view>
      <view class="cu-form-group">
        <view class="title">银行卡号</view>
        <input placeholder="银行卡号" name="input" v-model="form.bank_card"/>
      </view>

      <view class="padding flex flex-direction">
        <button class="cu-btn bg-primary lg" @click="handlePost">提交</button>
      </view>

    </form>
  </view>
</template>

<script>
import Api from "@/utils/Api";
import FormImage from "@/components/form-image/form-image";

export default {
  components: {FormImage},
  data() {
    return {
      form: {
        nickname: '',
        bg_img: '',
        remark: '',
        wx_name: '',
        wx_qr: '',
        alipay_name: '',
        alipay_qr: '',
        bank_name: '',
        bank: '',
        bank_card: '',
      },
    }
  },
  onLoad() {
    this.req.getUserInfoCheckMobile().then(res => {
      this.$set(this.form, "nickname", res.nickname);
      this.$set(this.form, "bg_img", res.bgImg);
      this.$set(this.form, "remark", res.remark);
      this.$set(this.form, "wx_name", res.wxName);
      this.$set(this.form, "wx_qr", res.wxQr);
      this.$set(this.form, "alipay_name", res.alipayName);
      this.$set(this.form, "alipay_qr", res.alipayQr);
      this.$set(this.form, "bank_name", res.bankName);
      this.$set(this.form, "bank", res.bank);
      this.$set(this.form, "bank_card", res.bankCard);

      console.log(this.form)
    })
  },
  methods: {
    handlePost() {
      Api.changeTechnicianInfo(this.form).then(res => {
        this.$toast("修改成功");
        setTimeout(_=>uni.navigateBack(),1300);
      })
    },
  },
}
</script>

<style scoped lang='scss'>
.cu-form-group .title {
  min-width: calc(6em + 15px);
}

.bg-primary {
  background-color: $primary-color;
  color: white;
}
</style>